<template>
  <div class="map-container">
    <div class="aa">
      <el-form :model="userForm" ref="userForm" label-width="100px" class="demo-userForm">
        <br><br><br>
        <br>

        <span style="font-size: 35px;font-weight: bolder;margin-left: 260px">用户注册页面</span>
        <br><br>

        <!--      <el-form-item label="" prop="userId" >-->
        <!--       <span style="font-weight: bolder;font-size: 18px">编号 </span>-->
        <!--        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
        <!--        <el-input v-model="userForm.userId" style="width: 420px"></el-input>-->
        <!--      </el-form-item>-->

        <el-form-item label="" prop="userName" >
          <span style="font-weight: bolder;font-size: 18px">用户名 </span>
          &nbsp;&nbsp;
          <el-input v-model="userForm.userName" style="width: 420px"></el-input>
        </el-form-item>

        <el-form-item label="" prop="userPass">
          <span style="font-weight: bolder;font-size: 18px">密码 </span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
          <el-input type="password" v-model="userForm.userPass" style="width: 420px"></el-input>
        </el-form-item>

        <el-form-item label="" prop="userPhone" >
          <span style="font-weight: bolder;font-size: 18px">手机号 </span>
          &nbsp;&nbsp;
          <el-input v-model="userForm.userTel" style="width: 300px"></el-input>
          <el-button @click="sendPCode">发送验证码</el-button>
        </el-form-item>

        <el-form-item label="" prop="userCode" >
          <span style="font-weight: bolder;font-size: 18px">验证码 </span>
          &nbsp;&nbsp;
          <el-input v-model="userForm.userPCode" style="width: 420px"></el-input>
        </el-form-item>

        <el-form-item label="" prop="userMail" >
          <span style="font-weight: bolder;font-size: 18px">邮箱 </span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
          <el-input v-model="userForm.userMail" style="width: 300px"></el-input>
          <el-button @click="sendMCode">发送验证码</el-button>
        </el-form-item>

        <el-form-item label="" prop="userCode" >
          <span style="font-weight: bolder;font-size: 18px">验证码 </span>
          &nbsp;&nbsp;
          <el-input v-model="userForm.userMCode" style="width: 420px"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('userForm')" style="margin-left: 220px">注册</el-button>
          <!--        <el-button @click="resetForm('userForm')">重置</el-button>-->
          <el-button @click="registerForm()">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<<script>
  export default {
    name: "register",
    data(){
      return{
        userForm:{
          userId:'',
          userName:'',
          userPass:'',
          userTel:'',
          userMail:'',
          userPCode:'',
          userMCode:''
        }
      }
    },
    methods:{
      submitForm(formName) {

        this.$axios.post('/fontuser/register',this.userForm)
          .then(res=>{
            // this.userForm=res.data;
            // console.log('register code===>'+res.data.code)
            // console.log('register code===>'+res.code)
            // console.log('register code===>'+res.data.data.code)
            if (res.data.code==200){
              alert("注册成功")
              this.$router.push("/login")
            }else{
              alert("注册失败")
            }
          })

        console.log('error submit!!');

        return false;

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      registerForm(){

        this.$router.push("/login")
      },
      sendPCode(){
        //发送验证请求
        this.$axios.get('/fontuser/userPhene?phone='+this.userForm.userTel)
          .then(res=>{
            console.log('res.data'+res.data)
          })
      },
      sendMCode(){
        //发送验证请求
        this.$axios.get('/fontuser/userMail?mail='+this.userForm.userMail)
          .then(res=>{
            console.log('res.data'+res.data)
          })
      }
    }
  }

</script>

<style scoped>
  .map-container{
    background-image: url('../assets/7.jpg');
    background-size: cover;
    background-position: center center;
  //opacity: 0.9;
    width: 1520px;
    height: 700px;
  }
  .aa{
    margin-left: 400px;
  }
</style>
